<template>
	<view class="re-address">
		<uni-segmented-control :current="current" :values="typeArr" @clickItem="onClickItem" style-type="text" active-color="#D62222"></uni-segmented-control>
		<view v-show="type === 1">
			<view class="re-wrapper">
				<view class="re-item" v-for="item in bankList">
					<view class="re-add" @click="hlandMap(item)">
						<view class="re-item-left">
							<view style="font-size: 16px;color: #333333;" v-if="longitudeadd&&longitudeadd">{{item.store_name}}</view>
							<view style="font-size: 16px;color: #333333;" else>{{item.name}}</view>
							<view style="font-size: 12px;color: #666666;padding-top: 5px;">{{item.all_address}}</view>
						</view>
						<image src="../../static/images/right-ion.png" style="width: 15px;height: 15px;float: right;"></image>
					</view>
					<view class="re-buttom">
						<view class="re-left" @click="hlandMap(item)">
							<image src="../../static/images/dizhi.png"></image><text style="margin-left: 5px;">查看地图</text>
						</view>
						<view class="re-right" @click="hanldCall(item.mobile)">
							<image src="../../static/images/bohao.png"></image><text style="margin-left: 5px;">联系Ta</text>
						</view>
					</view>
				</view>
				<uni-load-more
				:status="loadStatus"
				></uni-load-more>
			</view>
		</view>
		<view v-show="type === 2">
			<view class="curr-wrapper">
				<view style="width: 22%;float: left;">
					<view class='cell-bd-input' @tap="handleTap('picker2')" style="color: #666666;">{{ areaValue }}
					<image src="../../static/images/menu-down.png" style="height: 27px;width: 24px;vertical-align: middle;"></image>
					</view>
					<!-- <lb-picker ref="picker" v-model="value" mode="selector" :list="areaArr" @change="handleChange" @confirm="handleConfirm"
					 @cancel="handleCancel">
					</lb-picker> -->
					<!-- <view>{{ value2.join('-') }}</view> -->
					<lb-picker ref="picker2"
					  v-model="value2"
					  mode="multiSelector"
					  :list="listAreaData"
					  :level="2"
					  @change="handleChange"
					  @confirm="handleConfirm"
					  @cancel="handleCancel">
					</lb-picker>
				</view>
				<view class="brand">
					<view class="brand-item" v-for="(item,index) in car_serviceArr"  :key="index" v-bind:class="[index+1==type_stic?'sticStyle':'']" @click="hanldTypeStic(index)">{{item}}</view>
				</view>
			</view>
			<view class="re-wrapper">
				<view class="re-item" v-for="item in bankList2">
					<view class="re-add"  @click="hlandMap(item)">
						<view class="re-item-left">
							<view style="font-size: 16px;color: #333333;">{{item.name}}</view>
							<view style="font-size: 12px;color: #666666;padding-top: 5px;">{{item.all_address}}</view>
						</view>
						<image src="../../static/images/right-ion.png" style="width: 15px;height: 15px;float: right;"></image>
					</view>
					<view class="re-buttom" >
						<view class="re-left" @click="hlandMap(item)">
							<image src="../../static/images/dizhi.png"></image><text style="margin-left: 5px;">查看地图</text>
						</view>
						<view class="re-right" @click="hanldCall(item.mobile)">
							<image src="../../static/images/bohao.png"></image><text style="margin-left: 5px;">联系Ta</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more
			:status="loadStatus2"
			></uni-load-more>
		</view>
		
		<!--不允许地理授权不一样时的页面-->
		<!-- 	<view class="showFlag" v-if="showFlag" >
			  <view class="showFg">
			    <view class="showg">您拒绝了地理位置授权</view>
			      <view class="showg">需要重新设置</view>
			      <button class="showF" open-type="openSetting" bindopensetting="handler">去设置</button>
			    </view>
			</view> -->

	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	
	//
	import LbPicker from '@/components/lb-picker'	
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import areaData from './area-data-min'

	export default {
		data() {
			return {
				current: 0,
				mobile:"",
				value2: [],
				listAreaData: areaData,
				areaValue:"请选择",
				//
				value:'请选择',//地图
				platform: 'ios',
				loadStatus: 'more',
				page: 1,
				limit: 10,//每页显示几条
				bankList:[],
				
				loadStatus2: 'more',
				page2: 1,
				limit2: 10,//每页显示几条
				bankList2:[],
				list:[],
				refresh:false,
				
				//
				type:1,
				car_brand:"",//底盘类型
				longitude:"",//经度
				latitude:"",//纬度
				area_id:"",//市级id
				
				car_serviceArr:[],//车品牌
				typeArr:[],//车地点
				areaArr:[],//地区
				type_stic:1,//默认0
				latitudeadd:"",
				longitudeadd:"",
				addressList:[],
				  showFlag:false//拒绝授权
			}
		},
		components: {
			uniSegmentedControl,
			LbPicker,
			uniLoadMore
		},
		onReachBottom () {
			if (this.loadStatus === 'more'&&this.type==1) {
				this.getBanklist(true)
			}
			
			if (this.loadStatus2 === 'more'&&this.type2==2) {
				this.getBanklist2(true)
			}
		},
		onShow(){
		
		},
		onLoad(){
			if(this.type==1&&this.latitudeadd&& this.longitudeadd){
				this.getBanklist();
			}
			if(this.type2==2){
				this.getBanklist2();
			}
			this.getcarGettype();
			this.getCargetarea();
		},
		onReady: function () {
		    let that = this
		    wx.getLocation({
		      type: 'wgs84',
		      success: function (res) {
				  console.log(res)
		        that.latitudeadd = res.latitude
		        that.longitudeadd = res.longitude;
				that.getBanklist()
		      },
			  fail: function () {
				// wx.hideToast();
				// that.showFlag =  true
				that.latitudeadd = ""
				that.longitudeadd = ""
				console.log('拒绝授权');
				that.getBanklist()
			  }
		    })
		  },
		  handler: function (e) {
		      if (e.detail.authSetting["scope.userLocation"]) {
		        this.setData({
		          showFlag: false
		        })
		    //返回时重新刷新首页页面
		        wx.reLaunch({
		                url: '../index/index'
		          })
		      }
		    },

		methods: {
			hanldCall(mobile){
				  wx.makePhoneCall({
				        phoneNumber: mobile
				   });
			},
			onClickItem(index) {
				
				this.type = index+1;
				if(this.type==1){
					this.getBanklist();
				}
				if(this.type==2){
					this.getBanklist2();
				}
			},
			//获取经纬度
			hlandMap(item) {
				console.log(item)
				let longitude = parseFloat(item.longitude);
				let latitude = parseFloat(item.latitude);
				// let lon = parseFloat('longitude');
				// let lat = parseFloat('latitude');
				wx.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 18
				})
			},
			//选择
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(item) {
				console.log('change::', item)
			},
			handleConfirm(item) {
				console.log('confirm::', item);
				console.log(item.item[1])
				this.areaValue = item.item[1].label;
				
				this.area_id = item.item[1].value//地图id
				this.getBanklist2()
			},
			handleCancel(item) {
				console.log('cancel::', item)
			},
			
			//传经纬度
			getAddress() {
				let that = this;
				console.log(that)
				let data = {
					longitude:that.longitudeadd,//经度
					latitude:that.latitudeadd,//纬度
				}
				this.$api.cargetservicelist(data, res => {
					if (res.status) {
						console.log('传经纬度');
						this.addressList = res.data;
						console.log(this.addressList);
					}
			})
			},
			
			// 获取网点
			getBanklist(type) {
			let that = this;
				if(!type){
					this.page = 1;
				}
				let data = {
					page: this.page,
					limit: this.limit,
					type:this.type,//地址类型
					car_brand:"",//底盘类型
					area_id:"",//市级id
					longitude:that.longitudeadd,//经度
					latitude:that.latitudeadd,//纬度
				}
				
				this.loadStatus = 'loading'
				
				this.$api.cargetservicelist(data, res => {
					if (res.status) {
						if (this.page >= res.total) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
							
						if(type){
						  this.bankList = [...this.bankList, ...res.data]
						}else{
							this.bankList = res.data
						}
					
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			
			// 获取网点
			getBanklist2(type) {
				if(!type){
					this.page2 = 1;
				}
				let data = {
					page: this.page2,
					limit: this.limit2,
					type:this.type,//类型
					car_brand:this.type_stic,//底盘类型
					area_id:this.area_id//市级id
				}
				
				this.loadStatus2 = 'loading'
				
				this.$api.cargetservicelist(data, res => {
					if (res.status) {
						if (this.page2 >= res.total) {
							// 没有数据了
							this.loadStatus2 = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus2 = 'more'
							this.page2 ++
						}
						if(type){
							this.bankList2 = [...this.bankList2, ...res.data]
						}else{
							this.bankList2 = res.data
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			
			// 获取类型
			getcarGettype() {
				this.$api.carGettype({}, res => {
					if (res.status) {
						let car_service = res.data.car_service.car_brand; //车品牌
						let type = res.data.car_service.type; //车地点
						let car_serviceArr = [];
						let typeArr = [];
						for (let i in car_service) {
							car_serviceArr.push(car_service[i]); //属性
						}
						this.car_serviceArr = car_serviceArr;
						
						
						for (let i in type) {
							typeArr.push(type[i]); //地点
						}
						this.typeArr = typeArr;
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			
			//获取地点
			getCargetarea() {
				let data = {
					area_id:0
				}
				this.$api.cargetarea({data}, res => {
					if (res.status) {
						let areaInfo = res.data;
						console.log(areaInfo);
						var area = areaInfo.map(item => ({
							id: item.id,
							label: item.name,
							value:item.name
						}))
						this.areaArr = area;
					}
				})
				},
				hanldTypeStic(index){
					this.type_stic = index+1;
					this.getBanklist2()
				},
			
			}
	}
</script>

<style scoped>
	.re-address>>>.uni-collapse-cell__title:active {
		background-color: #fff;
	}

	.re-address {
		background-color: #F9F9F9;
		height: 100%;
		position: absolute;
		width: 100%;
	}

	.re-address>>>.segmented-control {
		background-color: #fff;
		justify-content: space-around;
	}


	.re-address>>>.segmented-control-item {
		flex: none;
	}

	.re-wrapper {
		display: flex;
		flex-direction: column;
		margin: 10px 16px;

	}

	.re-item {
		background-color: #fff;
		border-radius: 2px;
		margin-bottom: 10px;
	}

	.re-item-left {
		float: left;
		width: 70%;
	}

	.re-buttom {
		overflow: hidden;
		height: 45px;
		display: flex;
		flex-direction: row;
		text-align: center;
		line-height: 45px;
		border-top: 0.5px solid #f5f5f5;
		font-size: 14px;
	}

	.re-add {
		overflow: hidden;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.re-right {
		flex: 1;
		color: #068BF8;
	}

	.re-right image {
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}

	.re-left {
		flex: 1;
		border-right: 0.5px solid #F5F5F5;
		color: #E9923E;
	}

	.re-left image {
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}

	/*样式*/
	.re-address>>>.show-box {
		border: none !important;
		background-color: #f9f9f9 !important;
		height: 32px !important;
		padding: 0 20% 0 5% !important;
		color: #666666 !important;
		font-size: 14px !important;
	}

	.re-address>>>.show-box .right-arrow {
		right: 13px;
		color: #DDDDDD !important;
	}

	.re-address>>>.show-box .list-container .popper__arrow {
		display: none !important;
	}

	.re-address>>>.show-box .list-container .list .item.active {
		color: #D62222 !important;
		background: none !important;
	}

	.re-address>>>.list-container {
		top: 80upx !important;
	}

	.curr-wrapper {
		margin: 12px 13px;
	}

	.brand {
		width: 78%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.brand-item {
		background-color: #fff;
		padding: 5px 11px;
		margin: 0 3px;
		border-radius: 2px;
		font-size: 13px;
		color: #333333;
	}
	
	.sticStyle{
		color: #D62222;
	}
</style>
